import {
  ProCard,
  ProForm,
  ProFormGroup,
  ProFormList,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { useNode } from '@craftjs/core';
import { type CardBasicInfoProps } from '@jeoshi-pro/pro-rex.business.card-basic-info';
import React, { useEffect, useState } from 'react';

const SettingContent: React.FC<any> = ({ action }) => {
  const rowData = action.getCurrentRowData();
  const [cellType, setCellType] = useState('');

  useEffect(() => {
    if (rowData.type) {
      setCellType(rowData.type);
    }
  }, [rowData]);

  const options = [
    { value: 'text', label: '文本' },
    { value: 'img', label: '图片' },
    { value: 'tag', label: '标签' },
    { value: 'link', label: '链接' },
  ];

  return (
    <ProFormGroup>
      <ProFormSelect
        name="type"
        label="类型"
        options={options}
        onChange={(v) => setCellType(v as string)}
      />
      {cellType === 'text' && (
        <>
          <ProFormText name="label" label="文本" />
          <ProFormText name="value" label="信息" />
        </>
      )}
      {cellType === 'img' && (
        <>
          <ProFormText name="label" label="描述" />
          <ProFormText name="value" label="图片Url" />
        </>
      )}
      {cellType === 'tag' && (
        <>
          <ProFormText name="label" label="文本" />
          <ProFormText name="value" label="值" />
          {/* <ProFormItem name={"color"} label="颜色">
                    <ColorPicker format="hex" />
                </ProFormItem> */}
        </>
      )}
      {cellType === 'link' && (
        <>
          <ProFormText name="label" label="文本" />
          <ProFormText name="value" label="url" />
        </>
      )}
    </ProFormGroup>
  );
};

export const Cell: React.FC = () => {
  const {
    dataSource = [],
    actions: { setProp },
  } = useNode<CardBasicInfoProps>((node) => ({
    ...node.data.props,
  }));

  return (
    <ProForm
      initialValues={{
        dataSource: dataSource.map((item) => {
          return {
            items: item.map((ret) => ({ type: ret.type, ...ret.props })),
          };
        }),
      }}
      onFinish={(values) => {
        const dataSource = values.dataSource.map((item: any) => {
          return item.items.map(({ type, ...rest }: any) => ({
            type: type,
            props: rest,
          }));
        });

        setProp((props: CardBasicInfoProps) => {
          props.dataSource = dataSource;
        });
      }}
    >
      <ProFormList
        name={'dataSource'}
        creatorButtonProps={{
          creatorButtonText: '添加一列数据',
        }}
      >
        {(_, idx) => (
          <ProCard title={`第${idx + 1}列`} bordered>
            <ProFormList
              name={'items'}
              creatorButtonProps={{
                creatorButtonText: '添加元数据',
              }}
            >
              {(_, index, action) => (
                <ProCard title={`内容${index + 1}`} bordered>
                  <SettingContent action={action} />
                </ProCard>
              )}
            </ProFormList>
          </ProCard>
        )}
      </ProFormList>
    </ProForm>
  );
};
